<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="500px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :label-width="labelWidth" :disabled="disabled">
        <el-form-item label="限制登录" prop="limitType">
          <el-switch v-model="ruleForm.limitType" :active-value="'1'" :inactive-value="'2'"></el-switch>
        </el-form-item>
        <el-form-item label="限制提示" prop="limitExplain">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" v-model="ruleForm.limitExplain"
            placeholder="请输入限制提示" :style="{width: inputWidth}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="addLoading">确认限制</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    addBlackLimit,
  } from "@/api/members";

  export default {
    name: "Dialog",
    data() {
      return {
        addLoading: false,
        labelWidth: '100px',
        inputWidth: '300px',
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "功能限制",
        // 是否显示弹出层
        visible: false,
        // 表单参数
        ruleForm: {
          limitType: '1', //限制登录 1 限制 2 不限制
          customerId: '', //用户id
          limitExplain: '账号异常，请联系客服处理', //限制提示
        },
        // 表单校验
        rules: {
          limitExplain: [{
            required: true,
            message: "请输入限制提示",
            trigger: ['blur', 'change'],
          }],
        }
      };
    },
    created() {

    },
    methods: {
      /** 打开数字权益卡列表弹框 */
      open(row) {
        this.ruleForm.customerId = row.id
        if (row.limitType == '') {
          this.ruleForm.limitType = '2'
        } else {
          this.ruleForm.limitType = '1'
        }
        this.ruleForm.limitExplain = row.limitExplain
        this.visible = true
      },
      inputClick() { //修复input无法输入问题
        this.$forceUpdate()
      },
      // 取消按钮
      cancel() {
        this.visible = false;
      },
      /** 提交按钮 */
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.addLoading = true
            addBlackLimit(this.ruleForm).then(response => {
              this.$message.success('操作成功');
              this.$emit('refresh')
              this.visible = false;
              this.addLoading = false
            }).catch(() => {
              this.addLoading = false
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  };

</script>
<style scoped>
  .from_box {
    margin: 20px 0 0;
  }

  .shop_name {
    font-weight: bold;
    font-size: 16px;
    color: #1890FF;
    margin-bottom: 30px;
  }

  .input_box {
    margin: 0 10px;
  }

  .el_radio_box {
    display: flex;
    flex-direction: column;
  }

  .el_radio_box .el-radio {
    margin-top: 12px;
  }

</style>
